{% extends "correspondence/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/correspondence/css/index1.css">
    <link rel="stylesheet" href="../../static/public_file/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        footer {
            position: absolute;
            bottom: 0;
            left: 0;
        }

        #message_content table {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }

        #message_content table td,
        #message_content table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            padding: 3px 5px;
        }

        #message_content table th {
            border-bottom: 2px solid #ccc;
            text-align: center;
        }
        .list-one:hover {
            background: #F5F5F5;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div style="width: 100%;height: 40px;background: white;">
        <div style="width: 100%;height: 40px;">
            <div style="margin-top: 5px;padding-left: 10px;display: inline-block;vertical-align: top;">
                <button onclick="delete_email()"
                        style="width: 70px;height: 30px;border: red solid 1px;border-radius: 3px;line-height: 28px;background: red;color: white;">
                    删除
                </button>
            </div>
            <div style="width: 83%;margin-top: 5px;padding-left: 10px;display: inline-block;vertical-align: top;">
                <input id="search_data" type="text" style="width: 300px;height: 30px;border-radius: 3px;border: #cfcfcf solid 1px;padding-left: 5px;vertical-align: top;display: inline-block;" autocomplete="off">
                <input id="search_value" type="text" style="width: 300px;height: 30px;border-radius: 3px;border: #cfcfcf solid 1px;padding-left: 5px;vertical-align: top;display: inline-block;" autocomplete="off">
                <button onclick="search_input()" style="width: 90px;border-radius: 3px;border: #cfcfcf solid 1px;font-size: 14px;height: 30px;vertical-align: top;line-height: 28px;">
                    查询
                </button>
            </div>
        </div>
    </div>

    <div class="h-container" id="hContainer">
        <div class="panel-left" id="drag-left">
            <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;padding-left: 10px;">
                <div style="width: 30px;height: 40px;display: inline-block;vertical-align: top;">
                    <div style="height: 40px;width: 100%;line-height: 40px;text-align: center;">
                        <input style="margin-top: 10px;" type="checkbox" id="choice_all" onclick="ChoiceOrNot()">
                    </div>
                </div>
                <div class="change-color add-change-color" onclick="change_tab('all')" id="all">全部</div>
                <div class="change-color" onclick="change_tab('unread')" id="unread">未读</div>
                <div class="change-color" onclick="change_tab('read')" id="read">已读</div>

                <div onclick="all_read_set()"
                     style="text-align: center;height: 40px;line-height: 40px;float: right;cursor: pointer;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;padding-right: 15px;">
                    全部设为已读
                </div>
            </div>
            {#  邮件列表   #}
            <div id="excel_list" style="width: 100%;height: 90%;overflow: auto;">
                {% for foo in inbox_li %}
                    <div class="list-one" id="{{ foo.message_id }}-{{ foo.ids }}">
                        <div class="list-one-1">
                            <div class="list-one-1-1"><input style="margin-top: 10px;" type="checkbox" class="choice"
                                                             data-value="{{ foo.deleted_id }}"></div>
                            {% if foo.read %}
                                <div id="{{ foo.message_id }}" class="list-one-1-2" style="display: none;"><i
                                        style="color: green" class="iconfont icon-xinjian1"></i></div>
                            {% else %}
                                <div id="{{ foo.message_id }}" class="list-one-1-2"><i style="color: green"
                                                                                       class="iconfont icon-youjian2"></i>
                                </div>
                            {% endif %}
                        </div>

                        {% if foo.read %}
                            <div class="list-one-2" id="{{ foo.ids }}"
                                 onclick="message_detail('{{ foo.message_id }}', '{{ foo.ids }}', '{{ foo.message_id }}-{{ foo.ids }}')">
                                <div class="list-one-2-1">
                                    <div class="list-one-2-1-1">
                                        <div title="{{ foo.title }}" class="list-one-2-1-1-1">{{ foo.title }}</div>
                                    </div>
                                    <div class="list-one-2-1-2"
                                         title="{{ foo.create_time }}">{{ foo.create_time }}</div>
                                </div>
                                <div class="list-one-2-2" title="{{ foo.plain_text }}">{{ foo.plain_text }}</div>
                            </div>
                        {% else %}
                            <div class="list-one-3" id="{{ foo.ids }}"
                                 onclick="message_detail('{{ foo.message_id }}', '{{ foo.ids }}', '{{ foo.message_id }}-{{ foo.ids }}')">
                                <div class="list-one-2-1">
                                    <div class="list-one-2-1-1">
                                        <div title="{{ foo.title }}" class="list-one-2-1-1-1">{{ foo.title }}</div>
                                    </div>
                                    <div class="list-one-2-1-2"
                                         title="{{ foo.create_time }}">{{ foo.create_time }}</div>
                                </div>
                                <div class="list-one-2-2" title="{{ foo.plain_text }}">{{ foo.plain_text }}</div>
                            </div>
                        {% endif %}

                    </div>
                {% endfor %}
            </div>
            <hr>
            {#  分页   #}
            <div style="width: 100%;height: 40px;text-align: right;font-size: 13px;line-height: 40px;padding-right: 20px;">
                {% if cunt_page == 1 %}
                    <span id="last_page" onclick="page_turning('{{ last_page }}')"
                          style="cursor: pointer;display: none;">上一页</span>
                {% else %}
                    <span id="last_page" onclick="page_turning('{{ last_page }}')" style="cursor: pointer;">上一页</span>
                {% endif %}

                <span id="cunt_page" style="margin-left: 10px;">{{ cunt_page }}</span> / <span id="page_number"
                                                                                               style="margin-right: 10px;">{{ page_number }}</span>

                {% if cunt_page == page_number %}
                    <span id="next_page" onclick="page_turning('{{ next_page }}')"
                          style="cursor: pointer;display: none;">下一页</span>
                {% else %}
                    <span id="next_page" onclick="page_turning('{{ next_page }}')" style="cursor: pointer;">下一页</span>
                {% endif %}

                <input id="input_page" type="text" style="width: 40px;height: 20px;display: inline-block;margin-left: 20px;border-radius: 3px;border: #cfcfcf solid 1px;outline: none;">

                <span onclick="page_turning('', jump=true)" style="margin-left: 10px;cursor: pointer;">跳转</span>
            </div>
        </div>
        <div class="vertical-dragbar" id="vDragbar"></div>
        <div class="panel-right" id="drag-right">
            <div id="MessageDetail"
                 style="height: 100%;width: 100%;position: relative;display: none;flex-direction: column;">
                <div style="width: 100%;padding-left: 2%;padding-right: 5%;border-bottom: #cfcfcf 0.5px solid;">
                    <table style="width: 100%;padding-right: 5%;">
                        <tr>
                            <td height="24" valign="middle" style="word-break:break-all;padding:9px 8px 2px 14px;"
                                class="txt_left settingtable readmail_subject">
                                <div class="qm_left" style="padding-bottom:3px;">
                                    <h3 id="mail_title" class="sub_title " style="padding-left:14px;"></h3>
                                </div>
                                <div id="tagContainer" ck="tag" class="TagDiv TagReadmail"
                                     style="overflow:visible;margin-top:0;"></div>
                                <div class="clr"></div>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-left:14px;" class="settingtable txt_left">
                                <span class="addrtitle" style="padding-left:14px;">发&nbsp;&nbsp;件&nbsp;&nbsp;人：</span>
                                <span>
                                   <span id="sender_name"></span>&lt;<span id="sender"></span>&gt;
                               </span>&nbsp;
                            </td>
                        </tr>

                        <tr>
                            <td style="padding-left:14px;" class="settingtable txt_left">
                                <span class="addrtitle" style="padding-left:14px;">发件时间：</span>
                                <span id="create_time">
                               </span>&nbsp;
                            </td>
                        </tr>

                        <tr>
                            <td style="padding-left:14px;" class="settingtable txt_left">
                                <span class="addrtitle" style="padding-left:14px;">收&nbsp;&nbsp;件&nbsp;&nbsp;人：</span>
                                <span>
                                    投递成功 [<a id="click_count" href="javascript:void(0)" onclick="block_div()">查看详情</a>]
                               </span>&nbsp;
                            </td>
                        </tr>
                    </table>

                    <div id="sjr_table"
                         style="width: 100%;height: 100px;overflow: auto;margin-left: 25px;border-top: #cfcfcf solid 1px;border-bottom: #cfcfcf solid 1px;display: none;">
                        <table style="width: 100%;border: #cfcfcf solid 1px;" id="sjr">
                            <tr style="width: 100%;">
                                <td style="width: 33%;border: #cfcfcf solid 1px;">收件人</td>
                                <td style="width: 33%;border: #cfcfcf solid 1px;">发送状态</td>
                                <td style="width: 33%;border: #cfcfcf solid 1px;">发送时间</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div style="height: 55%;padding-left: 2%;padding-right: 5%;overflow: auto;border-bottom: #cfcfcf 0.5px solid;">
                    <div id="message_content" style="margin-top: 3%;padding-left: 2%;padding-right: 5%;">
                    </div>
                </div>
                <br>
                <div id="file_div" onclick="QuickResponseOnblur()"
                     style="width: 100%;padding-left: 2%;height: 20%;overflow: auto;padding-bottom: 50px;">
                </div>

                <footer style="width: 100%;background: white;">
                    <textarea name="`" id="textarea-footer"
                              style="width: 96%;height: 40px;outline: #00a0e9;margin-left: 20px;border: #00a0e9 solid 1px;"
                              placeholder="回复：快速回复" onfocus="QuickResponseOnfocus(this)"></textarea>
                    <div style="width: 100%;height: 40px;display: none;" id="send-footer">
                        <button id="send_button"
                                style="width: 70px;margin-left: 20px;border: #00a0e9 solid 1px;background: #00a0e9;color: white;border-radius: 3px;text-align: center;letter-spacing: 3px;height: 30px;line-height: 30px;margin-top: 5px;">
                            发送
                        </button>
                        <span><a id="letter-mode" href="javascript:;">切换至完整写信模式</a></span>
                    </div>
                </footer>
            </div>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script src="../../static/public_file/script.js"></script>
    <script type="text/javascript" src="../../static/public_file/other/jquery.js"></script>
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
        window.onload = function () {
            document.getElementById("communication-inbox").className = "add_class";
            document.getElementById("correspondence").className = "add-nav-active";
        };

        lay('#version').html('-v' + laydate.v);

        //执行一个laydate实例
        laydate.render({
            elem: '#search_data', //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        var returnDict = {{ returnDict | safe }};
        var messige_flag = "{{ messige_flag | safe }}";
        if (messige_flag === "True") {
            document.getElementById("MessageDetail").style.display = 'flex';
            document.getElementById("mail_title").innerText = returnDict["message_data"]["mail_title"];
            document.getElementById("textarea-footer").placeholder = "快速回复：'" + returnDict["message_data"]["mail_title"] + "'"
            document.getElementById("sender_name").innerText = returnDict["message_data"]["sender_name"];
            document.getElementById("sender").innerText = returnDict["message_data"]["sender"];
            document.getElementById("create_time").innerText = returnDict["message_data"]["create_time"];
            document.getElementById("message_content").innerHTML = returnDict["message_data"]["message_content"];
            console.log(returnDict["message_data"]["message_content"])
            var file_url = returnDict["message_data"]["file_url"];
            var create_time = returnDict["message_data"]["create_time"];
            var file_div = document.getElementById("file_div");
            file_div.innerHTML = "";
            for (var i = 0; i < file_url.length; i++) {
                var div_tag = document.createElement("div");
                var div_tag_1 = document.createElement("div");
                div_tag_1.style.fontSize = '14px';
                div_tag_1.style.display = 'inline-block';
                div_tag_1.style.verticalAlign = 'top';
                if (file_url[i]["file_path"].split(".").slice(-1)[0] === "doc" || file_url[i]["file_path"].split(".").slice(-1)[0] === "docx") {
                    div_tag_1.innerHTML = '<img src="../../static/correspondence/img/word%20(3).png" alt="" style="width: 50px;height: 50px;">';
                } else if (file_url[i]["file_path"].split(".").slice(-1)[0] === "pdf" || file_url[i]["file_path"].split(".").slice(-1)[0] === "PDF") {
                    div_tag_1.innerHTML = '<img src="../../static/correspondence/img/pdf.png" alt="" style="width: 50px;height: 50px;">';
                } else if (file_url[i]["file_path"].split(".").slice(-1)[0] === "xls" || file_url[i]["file_path"].split(".").slice(-1)[0] === "xlsx") {
                    div_tag_1.innerHTML = '<img src="../../static/correspondence/img/Excel写入-选中.png" alt="" style="width: 50px;height: 50px;">'
                } else {
                    div_tag_1.innerHTML = '<img src="../../static/correspondence/img/PNG%20(1).png" alt="" style="width: 50px;height: 50px;">'
                }

                var div_tag_2 = document.createElement("div");
                div_tag_2.style.fontSize = '0';
                div_tag_2.style.display = 'inline-block';
                div_tag_2.style.verticalAlign = 'top';
                div_tag_2.style.marginLeft = '10px';
                var div_tag_3 = document.createElement("div");
                if (file_url[i].hasOwnProperty("pdf_path")) {
                    div_tag_3.innerHTML = "<a style='font-size: 14px;' target='_blank' href='" + file_url[i]["pdf_path"] + "'>" + file_url[i]["file_name"] + "</a>";
                } else {
                    div_tag_3.innerHTML = "<a style='font-size: 14px;' href='" + file_url[i]["file_path"] + "'>" + file_url[i]["file_name"] + "</a>";
                }
                var div_tag_4 = document.createElement("div");
                div_tag_4.innerHTML = "<a style='font-size: 14px;color: #0000FF;' href='http://" + local_host + file_url[i]["download_path"] + "'>下载附件</a>";
                div_tag_2.appendChild(div_tag_3);
                div_tag_2.appendChild(div_tag_4);
                div_tag.appendChild(div_tag_1);
                div_tag.appendChild(div_tag_2);
                file_div.appendChild(div_tag);
            }

            var recipient_list = returnDict["message_data"]["recipient_name"];
            var sjr = document.getElementById("sjr");
            sjr.innerHTML = "";
            for (var j = 0; j < recipient_list.length; j++) {
                var tr = document.createElement("tr");
                tr.style.width = "100%";
                var td = document.createElement("td");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                td.innerHTML = recipient_list[j];
                td.style.width = '33%';
                td.style.border = "#cfcfcf solid 1px";
                td1.innerHTML = "发送成功";
                td1.style.width = '33%';
                td1.style.border = "#cfcfcf solid 1px";
                td2.innerHTML = create_time;
                td2.style.width = '33%';
                td2.style.border = "#cfcfcf solid 1px";
                tr.appendChild(td);
                tr.appendChild(td1);
                tr.appendChild(td2);
                sjr.appendChild(tr);
            }
        }

        function message_detail(message_id, ids, div_id) {
            document.getElementById("loading").style.display = 'inline-block';
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('get', "/correspondence/inbox_detail?message_id=" + String(message_id), true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        document.getElementById("MessageDetail").style.display = 'flex';
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        var back_list = document.getElementsByClassName("list-one add-background");
                        if (back_list.length !== 0) {
                            back_list[0].className = "list-one";
                        }
                        document.getElementById(div_id).className = "list-one add-background";
                        document.getElementById(ids).style.color = "#C0C0C0";
                        document.getElementById(message_id).style.display = "none";

                        document.getElementById("sjr_table").style.display = 'none';
                        document.getElementById("click_count").innerText = "查看详情";
                        document.getElementById("click_count").setAttribute("onclick", 'block_div()');

                        document.getElementById("mail_title").innerText = JsonDate["message_data"]["mail_title"];
                        document.getElementById("textarea-footer").placeholder = "快速回复：'" + JsonDate["message_data"]["mail_title"] + "'"
                        document.getElementById("letter-mode").href = 'reply_email?id=' + JsonDate["message_data"]["message_id"];
                        document.getElementById("send_button").setAttribute("onclick", "QuickReply('" + JsonDate["message_data"]["message_id"] + "')");
                        document.getElementById("sender_name").innerText = JsonDate["message_data"]["sender_name"];
                        document.getElementById("sender").innerText = JsonDate["message_data"]["sender"];
                        document.getElementById("create_time").innerText = JsonDate["message_data"]["create_time"];
                        document.getElementById("message_content").innerHTML = JsonDate["message_data"]["message_content"];
                        console.log(JsonDate["message_data"]["message_content"])
                        var file_url = JsonDate["message_data"]["file_url"];
                        var create_time = JsonDate["message_data"]["create_time"];
                        var file_div = document.getElementById("file_div");
                        file_div.innerHTML = "";
                        for (var i = 0; i < file_url.length; i++) {
                            var div_tag = document.createElement("div");
                            var div_tag_1 = document.createElement("div");
                            div_tag_1.style.fontSize = '14px';
                            div_tag_1.style.display = 'inline-block';
                            div_tag_1.style.verticalAlign = 'top';
                            if (file_url[i]["file_path"].split(".").slice(-1)[0] === "doc" || file_url[i]["file_path"].split(".").slice(-1)[0] === "docx") {
                                div_tag_1.innerHTML = '<img src="../../static/correspondence/img/word%20(3).png" alt="" style="width: 50px;height: 50px;">';
                            } else if (file_url[i]["file_path"].split(".").slice(-1)[0] === "pdf" || file_url[i]["file_path"].split(".").slice(-1)[0] === "PDF") {
                                div_tag_1.innerHTML = '<img src="../../static/correspondence/img/pdf.png" alt="" style="width: 50px;height: 50px;">';
                            } else if (file_url[i]["file_path"].split(".").slice(-1)[0] === "xls" || file_url[i]["file_path"].split(".").slice(-1)[0] === "xlsx") {
                                div_tag_1.innerHTML = '<img src="../../static/correspondence/img/Excel写入-选中.png" alt="" style="width: 50px;height: 50px;">'
                            } else {
                                div_tag_1.innerHTML = '<img src="../../static/correspondence/img/PNG%20(1).png" alt="" style="width: 50px;height: 50px;">'
                            }

                            var div_tag_2 = document.createElement("div");
                            div_tag_2.style.fontSize = '0';
                            div_tag_2.style.display = 'inline-block';
                            div_tag_2.style.verticalAlign = 'top';
                            div_tag_2.style.marginLeft = '10px';
                            var div_tag_3 = document.createElement("div");
                            if (file_url[i].hasOwnProperty("pdf_path")) {
                                div_tag_3.innerHTML = "<a style='font-size: 14px;' target='_blank' href='" + file_url[i]["pdf_path"] + "'>" + file_url[i]["file_name"] + "</a>";
                            } else {
                                div_tag_3.innerHTML = "<a style='font-size: 14px;' href='" + file_url[i]["file_path"] + "'>" + file_url[i]["file_name"] + "</a>";
                            }
                            var div_tag_4 = document.createElement("div");
                            div_tag_4.innerHTML = "<a style='font-size: 14px;color: #0000FF;' href='http://" + local_host + file_url[i]["download_path"] + "'>下载附件</a>";
                            div_tag_2.appendChild(div_tag_3);
                            div_tag_2.appendChild(div_tag_4);
                            div_tag.appendChild(div_tag_1);
                            div_tag.appendChild(div_tag_2);
                            file_div.appendChild(div_tag);
                        }

                        var recipient_list = JsonDate["message_data"]["recipient_name"];
                        var sjr = document.getElementById("sjr");
                        sjr.innerHTML = "";
                        for (var j = 0; j < recipient_list.length; j++) {
                            var tr = document.createElement("tr");
                            tr.style.width = "100%";
                            var td = document.createElement("td");
                            var td1 = document.createElement("td");
                            var td2 = document.createElement("td");
                            td.innerHTML = recipient_list[j];
                            td.style.width = '33%';
                            td.style.border = "#cfcfcf solid 1px";
                            td1.innerHTML = "发送成功";
                            td1.style.width = '33%';
                            td1.style.border = "#cfcfcf solid 1px";
                            td2.innerHTML = create_time;
                            td2.style.width = '33%';
                            td2.style.border = "#cfcfcf solid 1px";
                            tr.appendChild(td);
                            tr.appendChild(td1);
                            tr.appendChild(td2);
                            sjr.appendChild(tr);
                        }

                    }
                }
            };
        }

        function block_div() {
            document.getElementById("sjr_table").style.display = 'inline-block';
            document.getElementById("click_count").innerText = "关闭";
            document.getElementById("click_count").setAttribute("onclick", 'none_div()');
        }

        function none_div() {
            document.getElementById("sjr_table").style.display = 'none';
            document.getElementById("click_count").innerText = "查看详情";
            document.getElementById("click_count").setAttribute("onclick", 'block_div()');
        }

        function page_turning(page_number, jump = false, search_type = 'all') {
            if (jump) {
                page_number = document.getElementById("input_page").value
                if (parseInt(page_number) > parseInt(document.getElementById("page_number").innerText)) {
                    alert("所输入页码超过总页数！请重新输入！")
                }
            }
            search_type = document.getElementsByClassName("change-color add-change-color")[0].id;
            document.getElementById("loading").style.display = 'inline-block';
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('get', "/correspondence/inbox.html?search=1&search_type=" + search_type + "&page=" + String(page_number), true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);

                        document.getElementById("cunt_page").innerText = JsonDate["data"]["cunt_page"];
                        document.getElementById("page_number").innerText = JsonDate["data"]["page_number"];

                        if (JsonDate["data"]["cunt_page"] === 1) {
                            document.getElementById("last_page").style.display = 'none';
                        } else {
                            document.getElementById("last_page").style.display = 'inline-block';
                            document.getElementById("last_page").setAttribute("onclick", "page_turning('" + JsonDate["data"]["last_page"] + "')")
                        }
                        if (JsonDate["data"]["cunt_page"] === JsonDate["data"]["page_number"]) {
                            document.getElementById("next_page").style.display = 'none';
                        } else {
                            document.getElementById("next_page").style.display = 'inline-block';
                            document.getElementById("next_page").setAttribute("onclick", "page_turning('" + JsonDate["data"]["next_page"] + "')")
                        }
                        create_excel_list(JsonDate["data"]["inbox_li"]);
                    }
                }
            };
        }

        // 创建新的邮件列表
        function create_excel_list(Json_data) {
            var excel_list = document.getElementById("excel_list");
            excel_list.innerHTML = "";
            for (var i = 0; i < Json_data.length; i++) {
                var div = document.createElement("div");
                div.className = 'list-one';
                div.id = Json_data[i]["message_id"] + "-" + Json_data[i]["ids"];
                var div1 = document.createElement("div");
                div1.className = "list-one-1";
                var div2 = document.createElement("div");
                div2.className = "list-one-1-1";
                var inputcheck = document.createElement("input");
                inputcheck.type = 'checkbox';
                inputcheck.style.marginTop = "10px";
                inputcheck.className = 'choice';
                inputcheck.setAttribute('data-value', Json_data[i]["deleted_id"]);
                div2.appendChild(inputcheck);
                var div3 = document.createElement("div");
                div3.id = Json_data[i]["message_id"];
                div3.className = "list-one-1-2";
                if (Json_data[i]["read"]) {
                    div3.style.display = "none";
                }
                var i_tag = document.createElement("i");
                i_tag.style.color = "green";
                i_tag.className = "iconfont icon-youjian2";
                div3.appendChild(i_tag);
                div1.appendChild(div2);
                div1.appendChild(div3);

                var div4 = document.createElement("div");
                div4.id = Json_data[i]["ids"];
                if (Json_data[i]["read"]) {
                    div4.className = "list-one-2";
                } else {
                    div4.className = "list-one-3";
                }
                div4.setAttribute("onclick", "message_detail('" + Json_data[i]["message_id"] + "', '" + Json_data[i]["ids"] + "', '" + Json_data[i]["message_id"] + "-" + Json_data[i]["ids"] + "')");
                var div5 = document.createElement("div");
                div5.className = "list-one-2-1";
                var div6 = document.createElement("div");
                div6.className = "list-one-2-1-1";
                var div7 = document.createElement("div");
                div7.className = "list-one-2-1-1-1";
                div7.title = Json_data[i]["title"];
                div7.innerText = Json_data[i]["title"];
                div6.appendChild(div7);
                var div8 = document.createElement("div");
                div8.className = "list-one-2-1-2";
                div8.title = Json_data[i]["create_time"];
                div8.innerText = Json_data[i]["create_time"];
                div5.appendChild(div6);
                div5.appendChild(div8);
                var div9 = document.createElement("div");
                div9.className = "list-one-2-2";
                div9.title = Json_data[i]["plain_text"];
                div9.innerText = Json_data[i]["plain_text"];
                div4.appendChild(div5);
                div4.appendChild(div9);
                div.appendChild(div1);
                div.appendChild(div4);
                excel_list.appendChild(div);
            }
        }

        function change_tab(ele_id) {
            if (ele_id === "all") {
                document.getElementById(ele_id).className = "change-color add-change-color";
                document.getElementById('unread').className = "change-color";
                document.getElementById('read').className = "change-color";
            } else if (ele_id === "unread") {
                document.getElementById(ele_id).className = "change-color add-change-color";
                document.getElementById('all').className = "change-color";
                document.getElementById('read').className = "change-color";
            } else {
                document.getElementById(ele_id).className = "change-color add-change-color";
                document.getElementById('unread').className = "change-color";
                document.getElementById('all').className = "change-color";
            }
            page_turning(1, job_number = false, search_type = ele_id);
        }

        // 全选
        function ChoiceOrNot() {
            var choice_list = document.getElementsByClassName("choice");
            if (document.getElementById("choice_all").checked) {
                for (var i = 0; i < choice_list.length; i++) {
                    choice_list[i].checked = true;
                }
            } else {
                for (var t = 0; t < choice_list.length; t++) {
                    choice_list[t].checked = false;
                }
            }
        }

        // 删除邮件
        function delete_email() {
            var choice_list = document.getElementsByClassName("choice");
            var delete_list = [];
            for (var i = 0; i < choice_list.length; i++) {
                if (choice_list[i].checked) {
                    delete_list.push(choice_list[i].dataset.value);
                }
            }
            var search_type = document.getElementsByClassName("change-color add-change-color")[0].id;
            document.getElementById("loading").style.display = 'inline-block';
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('get', "/correspondence/inbox.html?search=1&search_type=" + search_type + "&delete_list=" + JSON.stringify(delete_list), true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);

                        document.getElementById("choice_all").checked = false;

                        document.getElementById("cunt_page").innerText = JsonDate["data"]["cunt_page"];
                        document.getElementById("page_number").innerText = JsonDate["data"]["page_number"];

                        if (JsonDate["data"]["cunt_page"] === 1) {
                            document.getElementById("last_page").style.display = 'none';
                        } else {
                            document.getElementById("last_page").style.display = 'inline-block';
                            document.getElementById("last_page").setAttribute("onclick", "page_turning('" + JsonDate["data"]["last_page"] + "')")
                        }
                        if (JsonDate["data"]["cunt_page"] === JsonDate["data"]["page_number"]) {
                            document.getElementById("next_page").style.display = 'none';
                        } else {
                            document.getElementById("next_page").style.display = 'inline-block';
                            document.getElementById("next_page").setAttribute("onclick", "page_turning('" + JsonDate["data"]["next_page"] + "')")
                        }
                        create_excel_list(JsonDate["data"]["inbox_li"]);
                    }
                }
            };
        }

        // 查询邮件
        function search_input() {
            var search_data = document.getElementById("search_data").value;             // 时间
            var search_value = document.getElementById("search_value").value;              // 查询值
            document.getElementById("loading").style.display = 'inline-block';
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('get', "/correspondence/inbox.html?search=1&search_data=" + String(search_data) + "&search_value=" + String(search_value), true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);

                        document.getElementById("choice_all").checked = false;
                        document.getElementById("all").className = "change-color add-change-color";
                        document.getElementById('unread').className = "change-color";
                        document.getElementById('read').className = "change-color";

                        document.getElementById("cunt_page").innerText = JsonDate["data"]["cunt_page"];
                        document.getElementById("page_number").innerText = JsonDate["data"]["page_number"];

                        if (JsonDate["data"]["cunt_page"] === 1) {
                            document.getElementById("last_page").style.display = 'none';
                        } else {
                            document.getElementById("last_page").style.display = 'inline-block';
                            document.getElementById("last_page").setAttribute("onclick", "page_turning('" + JsonDate["data"]["last_page"] + "')")
                        }
                        if (JsonDate["data"]["cunt_page"] === JsonDate["data"]["page_number"]) {
                            document.getElementById("next_page").style.display = 'none';
                        } else {
                            document.getElementById("next_page").style.display = 'inline-block';
                            document.getElementById("next_page").setAttribute("onclick", "page_turning('" + JsonDate["data"]["next_page"] + "')")
                        }
                        create_excel_list(JsonDate["data"]["inbox_li"]);
                    }
                }
            };
        }

        // 全部设为已读
        function all_read_set() {
            document.getElementById("loading").style.display = 'inline-block';
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('get', "/correspondence/inbox.html?search=1&all_read=true", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);

                        document.getElementById("choice_all").checked = false;
                        document.getElementById("all").className = "change-color add-change-color";
                        document.getElementById('unread').className = "change-color";
                        document.getElementById('read').className = "change-color";

                        document.getElementById("cunt_page").innerText = JsonDate["data"]["cunt_page"];
                        document.getElementById("page_number").innerText = JsonDate["data"]["page_number"];

                        if (JsonDate["data"]["cunt_page"] === 1) {
                            document.getElementById("last_page").style.display = 'none';
                        } else {
                            document.getElementById("last_page").style.display = 'inline-block';
                            document.getElementById("last_page").setAttribute("onclick", "page_turning('" + JsonDate["data"]["last_page"] + "')")
                        }
                        if (JsonDate["data"]["cunt_page"] === JsonDate["data"]["page_number"]) {
                            document.getElementById("next_page").style.display = 'none';
                        } else {
                            document.getElementById("next_page").style.display = 'inline-block';
                            document.getElementById("next_page").setAttribute("onclick", "page_turning('" + JsonDate["data"]["next_page"] + "')")
                        }
                        create_excel_list(JsonDate["data"]["inbox_li"]);
                    }
                }
            };
        }

        function QuickResponseOnfocus(this_tag) {
            this_tag.placeholder = '';
            this_tag.style.height = '80px';
            document.getElementById("send-footer").style.display = 'block';
        }

        function QuickResponseOnblur() {
            document.getElementById("textarea-footer").placeholder = "快速回复：'" + returnDict["message_data"]["mail_title"] + "'";
            document.getElementById("textarea-footer").style.height = '40px';
            document.getElementById("send-footer").style.display = 'none';
        }

        function QuickReply(ele_id) {
            var form = new FormData();
            var textarea_footer = document.getElementById("textarea-footer").value;
            if (!textarea_footer) {
                alert("请填写回信内容！")
                return false
            }
            document.getElementById("loading").style.display = 'inline-block';
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/correspondence/reply_email", true);
            form.append('id', String(ele_id));
            form.append('textarea_footer', textarea_footer)
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = 'none';
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            alert("回复成功！");
                            window.location.reload();
                        }
                    }
                }
            }
        }
    </script>
{% endblock %}
